import React, { Component } from 'react'
import { Chart, Tooltip, Axis, Legend, StackArea, Line } from 'viser-react';
import { Card, Breadcrumb, message} from 'antd'
import { getData } from '../../../api/report';

export default class ReportData extends Component {
  state = {
    data: {},
    sacle:[{
      dataKey: 'year',
      type: 'linear',
      tickInterval: 50,
    }]
  }
  getDataList = async () => {
    const res = await getData();
    if(res.meta.status !== 200){
      return message.error(res.meta.msg)
    }
    let tmp = []
    res.data.series.forEach( item => {
      for(let i=0;i<item.data.length;i++){
        tmp.push({
          country: item.name,
          year: res.data.xAxis[0].data[i],
          value: item.data[i]
        })
      }
    })
    console.log(tmp)
    this.setState({
      data: tmp
    })
    console.log(this.state.data)
  }
  componentDidMount(){
    this.getDataList()
  }
  render() {
    return (
      <Card>
        <Breadcrumb>
          <Breadcrumb.Item>首页</Breadcrumb.Item>
          <Breadcrumb.Item>数据分析</Breadcrumb.Item>
          <Breadcrumb.Item>统计报表</Breadcrumb.Item>
        </Breadcrumb>
        <Chart forceFit height={400} data={this.state.data} scale={this.state.scale}>
          <Tooltip />
          <Axis dataKey="value" />
          <Legend />
          <Line position="year*value" size={2} color="country" adjust="stack" />
          <StackArea position="year*value" color="country" />
        </Chart>
      </Card>
    )
  }
}
